<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>调查表</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <h1 title="提示" id="title" class="text-center">调查表</h1>
        <p id="description" class="description text-center">
          这是一个用户信息的调查表
        </p>
      </header>
      <form id="survey-form">
        <div class="form-group">
          <label id="name-label" for="name">姓名： </label>
          <input
            id="name"
            class="form-control"
            type="text"
            placeholder="请输入姓名"
            required
          />
        </div>
        <div class="form-group">
          <label id="email-label" for="email">邮箱：</label>
          <input
            id="email"
            class="form-control"
            type="email"
            placeholder="请输入邮箱"
            required
          />
        </div>
        <div class="form-group">
          <label id="age-label" for="age">年龄：</label>
          <input
            id="age"
            type="number"
            class="form-control"
            min="13"
            max="120"
            placeholder="请输入年龄"
          />
        </div>
        <div class="form-group">
          <p>哪个选项最能描述您当前的职位？</p>
          <select id="dropdown" name="role" class="form-control" required>
            <option disabled selected value>选择职位</option>
            <option value="student">学生</option>
            <option value="full">全职</option>
            <option value="none">不想说</option>
            <option value="other">其他</option>
          </select>
        </div>
        <div class="form-group">
          <p>你的姓名？</p>
          <label>
            <input type="radio" name="radio" value="male" checked />男
          </label>
          <label> <input type="radio" name="radio" value="female" />女 </label>
        </div>
        <div class="form-group">
          <p>你有哪些爱好？</p>
          <label>
            <input type="checkbox" name="checkbox" value="movie" />电影
          </label>
          <label>
            <input type="checkbox" name="checkbox" value="music" />音乐
          </label>
          <label>
            <input type="checkbox" name="checkbox" value="game" />游戏
          </label>
        </div>
        <div class="form-group">
          <p>有什么意见或建议？</p>
          <textarea> </textarea>
        </div>
        <div class="form-group">
          <button id="submit" type="submit">提交</button>
        </div>
      </form>
    </div>
  </body>
</html>
